<template>
	<view>
		<view>
			<u-cell-group title="基础信息" :title-style="cellGroupTitleSty" :border="false">
				<u-cell-item :arrow="false" title="客户名称" :value="detailsData.clientName" hover-class="none" :title-style="cellTitleSty" :value-style="cellValsty"></u-cell-item>
				<u-cell-item :arrow="false" title="联系电话" :value="detailsData.clientPhone" hover-class="none" :title-style="cellTitleSty" :value-style="cellValsty"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="user-address-panel" v-if="proxyClientConsigneeVOList.length > 0">
			<view class="panel-title" style="font-weight:600;">收货地址</view>
			<view class="user-address-wrap">
				<view class="user-address-list" v-for="item in proxyClientConsigneeVOList" :key="item.id">
					<view class="am-flex-row-center address-item-top">
						<text>{{ item.consigneeName }}</text>
						<text class="address-phone">{{ item.consigneePhone }}</text>
					</view>
					<text class="am-block am-text-break address-item-des">
						{{ item.consigneeProvince || '' }}{{ item.consigneeCity || '' }}{{ item.consigneeCounty || '' }}{{ item.consigneeAddress || '' }}
					</text>
					<view class="address-item-ft am-flex-rc-between">
						<view></view>
						<view class="address-btn-wrap am-flex-row-center">
							<view class="address-btn-del" @click="delAddress(item.id)">删除</view>
							<view class="address-btn-edit" @click="editItem(item)">编辑</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<template v-if="!!detailsData.id">
			<view class="page-footer-place"></view>
			<view class="page-footer-bar am-flex-rc-between">
				<button class="u-reset-button co-info-button page-info-btn" hover-class="co-info-button--hover" @click="delCustomer">删除客户</button>
				<button class="u-reset-button co-success-button page-success-btn" hover-class="co-success-button--hover" @click="editCustomer">编辑信息</button>
				<button class="u-reset-button co-primary-button page-primary-btn" hover-class="co-primary-button--hover" @click="addAddress">新增地址</button>
			</view>
		</template>
		<AddressEdit ref="addressEditRef" @success="addressHandleSuccess"></AddressEdit>
		<Customer ref="customerEditRef" @success="editCustomerSuccess"></Customer>
	</view>
</template>

<script>
import AddressEdit from './components/address-edit.vue';
import Customer from './components/customer-edit.vue';
import { apiCustomerDetails, apiDelCustomerAddress, apiDelCustomer } from '@/api/customer';
import { UPDATE_CUSTOMER_LIST } from '@/types/globalEventName';
import cloneDeep from 'lodash-es/cloneDeep';
export default {
	data() {
		return {
			customerName: '',
			customerPhone: '',
			receivingName: '',
			receivingPhone: '',
			receivingLocation: '', // 省市区文字
			receivingAddress: '',
			cellGroupTitleSty: {
				background: '#FFFFFF',
				color: '#000',
				fontSize: '34rpx',
				fontWeight: 600
			},
			submitLoading: false,
			cellTitleSty: {
				fontSize: '30rpx',
				color: '#666'
			},
			cellValsty: {
				fontSize: '30rpx',
				color: '#333'
			},
			pageQuery: {},
			detailsData: {},
			proxyClientConsigneeVOList: []
		};
	},
	components: {
		AddressEdit,
		Customer
	},
	/**
	 * @param {Object} option - 页面参数
	 * @param {String} option.id - 客户id
	 * */
	onLoad(option) {
		this.pageQuery = option;
		if (option.id) {
			this.getDetails();
		}
	},
	methods: {
		// 选择省change
		regionChange(e) {
			console.log(e.detail);
			this.receivingLocation = e.detail.value.join('-');
		},
		addAddress() {
			this.$refs.addressEditRef.out_open(this.pageQuery.id);
		},
		// 编辑客户
		editCustomer() {
			this.$refs.customerEditRef.out_open(this.pageQuery.id, this.detailsData);
		},
		// 点击编辑
		editItem(itemData) {
			this.$refs.addressEditRef.out_open(this.pageQuery.id, itemData);
		},
		// 删除地址
		delAddress(id) {
			uni.showModal({
				title: '删除确认',
				content: '确定删除？删除后客户数据不可恢复！',
				confirmColor: '#4BB019',
				success: delModal => {
					if (delModal.confirm) {
						apiDelCustomerAddress({ id })
							.then(res => {
								let { state, msg } = res.data;
								if (state === 'OK') {
									let curIndex = this.proxyClientConsigneeVOList.findIndex(p1 => p1.id === id);
									this.proxyClientConsigneeVOList.splice(curIndex, 1);
									this.$am_toast.success('删除成功！');
								} else {
									this.$am_toast.warning(msg);
								}
							})
							.catch(() => {
								this.$am_toast.warning('操作失败，请重新尝试！');
							});
					}
				}
			});
		},
		// 删除客户
		delCustomer() {
			uni.showModal({
				title: '删除确认',
				content: '确定删除？删除后客户数据不可恢复！',
				confirmColor: '#4BB019',
				success: delModal => {
					if (delModal.confirm) {
						apiDelCustomer({ id: this.pageQuery.id })
							.then(res => {
								let { state, msg } = res.data;
								if (state === 'OK') {
									uni.navigateBack({
										delta: 1
									});
									uni.$emit(UPDATE_CUSTOMER_LIST);
									this.$am_toast.success('删除成功！');
								} else {
									this.$am_toast.warning(msg);
								}
							})
							.catch(() => {
								this.$am_toast.warning('操作失败，请重新尝试！');
							});
					}
				}
			});
		},
		// 查询详情
		getDetails() {
			uni.showLoading({
				mask: true
			});
			apiCustomerDetails({ id: this.pageQuery.id })
				.then(res => {
					let { state, data, msg } = res.data;
					if (state === 'OK') {
						this.proxyClientConsigneeVOList = cloneDeep(data.proxyClientConsigneeVOList);
						delete data.proxyClientConsigneeVOList;
						this.detailsData = data;
						uni.hideLoading();
					} else {
						uni.hideLoading();
						this.$am_toast.warning(msg);
					}
				})
				.catch(() => {
					uni.hideLoading();
					this.$am_toast.error('查询失败！');
				});
		},
		// 操作成功
		addressHandleSuccess() {
			this.getDetails();
			uni.$emit(UPDATE_CUSTOMER_LIST);
		},
		// 编辑客户信息成功
		editCustomerSuccess() {
			this.getDetails();
			uni.$emit(UPDATE_CUSTOMER_LIST);
		}
	}
};
</script>

<style lang="scss" scoped>
$section-plr: 32rpx;
.user-address-panel {
	margin-top: 16rpx;
	background-color: #fff;
}
.panel-title {
	padding: 30rpx $section-plr 0;
	font-size: 36rpx;
	font-weight: 500;
	color: #000000;
}
.user-address-wrap {
}
.user-address-list {
	padding: 30rpx $section-plr 0;
	font-size: 26rpx;
	color: #333;
	& + .user-address-list {
		border-top: 1px solid #ededed;
	}
}
.address-item-top {
	height: 30rpx;
	.address-phone {
		margin-left: 43rpx;
	}
}
.address-item-des {
	min-height: 30rpx;
	margin-top: 16rpx;
	line-height: 34rpx;
}
.address-item-ft {
	padding: 30rpx $section-plr;
}
.address-btn-wrap {
	font-size: 30rpx;
	font-weight: 400;
}
.address-btn-del {
	color: #000;
}
.address-btn-edit {
	margin-left: 92rpx;
	color: #FE6507;
}
.page-footer-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 113rpx;
	width: 750rpx;
	padding: 0 $section-plr;
	background-color: #fff;
}
.page-footer-place {
	height: 113rpx;
}
.page-info-btn {
	height: 66rpx;
	width: 196rpx;
	line-height: 66rpx;
	font-size: 30rpx;
}
.page-success-btn {
	height: 66rpx;
	width: 196rpx;
	line-height: 66rpx;
	font-size: 30rpx;
}
.page-primary-btn {
	height: 66rpx;
	width: 196rpx;
	line-height: 66rpx;
	font-size: 30rpx;
}
</style>
